<template>
  <div id="circleMineList">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>

    <div class="table-conBtn">
      <el-button type="warning" @click="pubWork">
        发布动态
      </el-button>

      <el-button v-permission="'wh:system:circleRelease:deleteAll'" :disabled="searchDelStatus === 'Y'" type="warning" plain @click="delAll()">
        批量删除
      </el-button>

      <freshCom @searchList="searchList"></freshCom>
    </div>

    <!--全选-->
    <el-checkbox
      v-model="checkAll"
      class="topCheck"
      :indeterminate="isIndeterminate"
      :disabled="searchDelStatus === 'Y'"
      @change="handleCheckAllChange"
    ></el-checkbox>

    <!--下部table-->
    <div v-if="loading" v-loading="loading"></div>
    <p v-if="tableData.length === 0 && !loading" class="no-data">
      暂无数据！
    </p>

    <div class="container" ref="container">
      <el-checkbox-group
        v-if="tableData.length > 0 && !loading"
        v-model="multipleSelection"
        v-loading="loading"
        @change="checkChange"
      >
        <div v-for="(item, index) in tableData" :key="item.id" class="line">
          <div class="line-left">
            <el-checkbox :label="item.id" :disabled="item.deleted">
              {{ stance }}
            </el-checkbox>
          </div>
          <div class="line-right">
            <!--用户主要信息-->
            <userInfo
              ref="uInfo"
              :item="item"
              :index="index"
              from="lifeMine"
              @refresh="refresh"
            >
              <template v-slot:infoTag>
                <!--机审状态-->
                <el-tag type="success" effect="dark">
                  {{
                    item.machineStatu ? machine(item.machineStatu) : '未审核'
                  }}
                </el-tag>
                <!--保利威审核状态-->
                <el-tag
                  v-if="item.polyvStatu === 'UNPASS'"
                  type="success"
                  effect="dark"
                >
                  保利威未通过
                </el-tag>
                <!--人审状态-->
                <el-tag type="success" effect="dark">
                  {{ item.checkStatu ? mnual(item.checkStatu) : '未审核' }}
                </el-tag>
              </template>
            </userInfo>
            <!--点赞、删除...按钮-->
            <userBtn
              v-if="showComment(item)"
              :item="item"
              :btn-num="btnNum"
              title="我的发布"
              :index="index"
              from="lifeMine"
              @refresh="refresh"
            ></userBtn>
            <!--说点什么-->
            <template v-permission="'wh:system:circleRelease:addComment'">
              <userTalk
                v-if="showComment(item)"
                ref="userTalk"
                :item="item"
                title="我的发布"
                @refresh="refresh"
              ></userTalk>
            </template>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="changePage"
    ></pageCom>
    <dialogPubWork
      v-if="dialogPubWorkData.isShow"
      :dialog-data="dialogPubWorkData"
      @refresh="refresh"
    ></dialogPubWork>
  </div>
</template>

<script>
import { getMineList, delItem } from '@/api/lifeManagement' // 接口
import topSearch from '@component/circlesManagement/circleMine/topSearch' // 上部搜索条件
import userInfo from '@component/circlesManagement/common/userInfo' // 用户主要信息
import userBtn from '@component/circlesManagement/common/userBtn' // 点赞、删除...按钮
import userTalk from '@component/circlesManagement/common/userTalk' // 说点什么
import dialogPubWork from '@component/circlesManagement/circleMine/dialogPubWork' // 发布动态
import { sysNormalDisable, getPraiseBtn } from '@utils/dictionariesFunc'
import { mapGetters } from 'vuex'

export default {
  name: 'publish',
  msg: '圈子管理-我的发布-列表页',
  data() {
    return {
      total: 0,
      searchDelStatus: 'N',
      formInline: {
        // 搜索条件
        lifeType: '', // 动态类型
        orderBy: '', // 排序规则
        delete: '', // 删除状态
        checkStatu: '', // 人审结果
        machineStatu: '', // 机审结果
        displayRule: '', // 展示方式
        content: '', // 内容查询
        activityId: '', //关联活动ID
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      dialogPubWorkData: {
        // 发布动态
        isShow: false, // 默认隐藏
        params: '' // 编辑时，传递的参数
      },
      powerStr: 'system:circleRelease:list' // 是否查询的标识
    }
  },
  computed: {
    ...mapGetters({
      machine: 'dictionaries/getMachineStatu', // 机审状态
      mnual: 'dictionaries/getCheckStatu' // 人审状态
    })
  },
  activated() {
    // 跳到滚动距离
    this.$nextTick(() => {
      this.toContainerScrollHeight()
    })
  },
  mounted() {
    this.getBtnList()
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      // 监听滚动事件
      window.addEventListener('scroll', this.setContainerScrollHeight, true)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        sessionStorage.setItem(`powerAry_${id}`, res)
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
        this.getBtnList()
      })
    },
    /* 获取小手点赞数值 */
    async getBtnList() {
      if (!this.canGetList) return
      let str = await getPraiseBtn()
      this.btnNum = str.split(',')
    },
    /* 获取评论按钮列表 */
    async getTalkBtnList() {
      let data = await sysNormalDisable('sys_grade')
      for (let i = 0; i < this.tableData.length; i++) {
        this.$refs['userTalk'][i].getBtnList(data)
      }
    },
    /*是否显示评论点赞区域*/
    showComment(item) {
      let isHide =
        item.deleted ||
        (item.machineStatu === 'UNPASS' && item.checkStatu === 'UNCHECKED') ||
        item.polyvStatu === 'UNPASS'
      return !isHide
    },
    /* 获取列表 */
    searchList() {
      if (!this.canGetList) return
      this.loading = true
      this.tableData = []
      this.total = 0
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      getMineList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
          // 获取列表数据之后，遍历当前列表，获取全部id
          this.checkTableId()
          if (this.formInline.delete === 'false' || !this.formInline.delete) {
            //未删除状态获取小手点赞
            this.getTalkBtnList()
            this.searchDelStatus = 'N'
          } else {
            this.searchDelStatus = 'Y'
          }
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    /* 批量删除 */
    delAll() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认删除选中的这${this.multipleSelection.length}条数据吗？`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item)
        })
        this.delCheckItem(ids)
      })
    },
    // 删除请求
    delCheckItem(lifeIds) {
      let obj = { lifeIds, reason: '' }
      delItem(
        obj,
        (response) => {
          this.searchList()
          this.multipleSelection = []
          this.isIndeterminate = false
        },
        (response) => {
          this.$message.warning('删除失败，' + response.message)
        }
      )
    },
    /* 遍历获取当前页面table的id */
    checkTableId() {
      this.tableIds = []
      let _this = this
      this.tableData.forEach((item) => {
        if (item.id) {
          _this.tableIds.push(item.id)
        }
      })
    },
    /* 发布动态 */
    pubWork() {
      this.dialogPubWorkData.isShow = true
    }
  },
  components: {
    userInfo,
    userBtn,
    userTalk,
    topSearch,
    dialogPubWork
  }
}
</script>

<style lang="less">
#circleMineList {
  .topCheck {
    margin-left: 30px;
  }

  .line {
    display: flex;
    justify-content: left;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 25px 0 30px;

    .line-left {
      padding: 0 30px;
    }

    .line-right {
      flex: auto;
    }
  }
  p.no-data {
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #666;
  }
  .container {
    max-height: 490px;
    overflow-y: auto;
  }
}
</style>
